<template>
	<!-- 菜单界面 -->
	<div class="container">
		<el-page-header @back="$router.go(-1)" content="">
		</el-page-header>
		<!-- 动画区域 -->
		<div class="div2">
			<div class="div3">
				<div class="cmain">
					<p v-for="(item,index) in list1" :key="index" @click="getMenuList(index)">{{item}}</p>
					<p>搜索<i class="el-icon-search"></i></p>
				</div>
				<!-- 主体区域 -->
			</div>
		</div>
		<div class="div1"></div>
	</div>
</template>

<script>
// 导入请求数据的 baseurl
import baseUrl from '@/utils/urlconfig'
export default {
  data () {
    return {
      list1: ['菜谱大全', '智能推荐', '健康食疗', '食谱分类', '家常菜谱'],
      list2: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    async getMenuList (index) {
	  if (index === 1) {
		  this.$router.push({
		    path: '/aituijian',
		  	name: 'aituijian'
		  })
		  return
	  }
      var url = baseUrl + '/menu/menu_all/' + this.list2[index]
	  try {
	  	const {
	  	  data: res
	  	} = await this.$http.get(url)
        if (res.message === 'OK') {
		  var x = res.data.first_title
		  x = x.length > 20 ? x.slice(0, 21) : x
		  var menu1 = {
		    title: this.list1[index], menuList: x
		  }
		  localStorage.removeItem('menu1')
		  localStorage.setItem('menu1', JSON.stringify(menu1))
		  this.$router.push({
		    path: '/menu1',
				  name: 'menu1',
				  query: { title: this.list1[index] },
		    params: {
		      menuList: x
		    }
		  })
        }
	  } catch (e) {
	  	// TODO handle the exception
        console.log(e)
        console.log('网络错误')
	  }
    },
    animation () {
      var div2 = document.querySelector('.div2')
      var html = document.querySelector('html')
      var rootSize = parseInt(html.style.fontSize)
      var size = rootSize * 1180 / 160
      // console.log(size)
      var test2 = setInterval(function () {
        // your codes
        div2.style.width = div2.offsetWidth + 20 + 'px'
      }, 20)
	  console.log(div2.offsetWidth)
	  console.log(size)
	  // if (div2.offsetWidth === size) {
		 //  clearInterval(test2)
		 //  console.log(1111)
	  // }
      setTimeout(function () {
        clearInterval(test2)
      }, size)
    }
  },
  mounted () {
    this.animation()
  },
  created () {}
}
</script>

<style scoped>
	@import url("../assets/css/common.css");

	p {
		margin: 0;
		padding: 0;
		font-family: "楷体" !important;
	}

	.container {
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background: url(../assets/images/goods_bg1.png);
		background-size: 100% 100%;
		border: 1px solid #797979;
	}

	/* 动画区域 */
	.div1,
	.div2,
	.div3 {
		float: right;
		height: 4.5rem;
	}

	.div1 {
		margin-top: 75px;
		width: 0.475rem;
		background: url(../assets/images/卷轴1.png) no-repeat;
		background-size: 0.475rem;
	}

	.div2 {
		width: 1.01875rem;
		position: relative;
		overflow: hidden;
	}

	.div3 {
		width: 10rem;
		background: url(../assets/images/卷轴.png);
		background-size: 1600px;
		position: absolute;
		right: 100px;
		top: 75px;
		text-align: center;
	}

	/* 主要内容区域 */
	.cmain {
		position: absolute;
		width: 6rem;
		height: 2.775rem;
		top: 0.75rem;
		right: 1.34375rem;
		/* background-color: pink; */
		/* overflow: hidden; */
	}

	.cmain p {
		float: left;
		width: 1rem;
		height: 100%;
		font-size: 0.475rem;
		text-wrap: wrap;
		padding: 0.25rem;
		border-left: 2px solid #797979;
		cursor: pointer;
	}

	.cmain p:last-child {
		border-right: 2px solid #797979;
		padding-top: 0.5rem;
	}
</style>
